<template>
      <!-- 最大盒子开始 -->
    <div class="sort">
        <div class="container">
            <!-- 搜索框的开始 -->
            <div class="search">
                <router-link to="/search" tag="a" class="sear">
                    <div class="left"></div>
                    <div class="right"><span class="iconfont icon-sousuo"></span></div>
                </router-link>
            </div>
            <!-- 搜索框的结束 -->
            <!-- 内容的开始 -->
            <div class="content">
                <!-- 左边的内容的展示 -->
                <div class="left">
                    <ul>
                        <li v-for="(item,index) in leftList" :key="index" :class="{'con':index == indexCon}" @click="indexCon = index"><span>{{item}}</span></li>
                    </ul>
                </div>
                <!-- 右边的内容的展示 -->
                <div class="right">
                  <router-link to="/productDetail" tag="ul">
                    <li  v-for="(item,i) in rightList" :key="i*10" :class="{'active':i == indexCon}">
                          <!-- 内容1 -->
                    <div class="toptitle">
                        <h2>{{item.title1}}</h2>
                    </div>
                    <!-- 循环遍历 -->
                    <div class="content_box" v-for="counts in 3" :key="counts*8">
                        <div class="item" v-for="count in 3" :key="count*9">
                            <div class="first"><img :src="item.image" alt="" class="auto-img"></div>
                            <div class="last">{{item.text}}</div>
                        </div>
                        
                    </div>
                    
                   
                    <div class="item_box">
                        <div></div>
                    </div>

                    <!-- 内容2 -->
                    <div class="toptitle">
                        <h2>{{item.title2}}</h2>
                    </div>
                    <!-- 循环遍历 -->
                    <div class="content_box" v-for="counts2 in 3" :key="counts2">
                        <div class="item" v-for="count1 in 3" :key="count1">
                            <div class="first"><img :src="item.image" alt="" class="auto-img"></div>
                            <div class="last">{{item.text}}</div>
                        </div>
                        
                    </div>

                    <div class="item_box">
                        <div></div>
                    </div>
                    </li>
                  </router-link>
                </div>
            </div>
            <!-- 内容的结束 -->
        </div>
    </div>
    <!-- 最大的盒子结束 -->
</template>

<script>
// import BScroll from "./components/BScroll.vue"
import {getSort} from "../api/sort.js"
    export default {
        name:"sortHome",
        data() {
            return {
                leftList: null,  //左边的数据
                rightList:null,  //右边的数据
                indexCon:0, //选中下标
            };
        },
        methods:{
            // 获取json数据方法
            getSortFun(){
                getSort().then(data => {
                    // console.log(data);
                    this.leftList = data.left;
                    this.rightList = data.right;
                    // console.log(this.leftList);
                })
            }
        },
        created(){
            
            this.getSortFun();  //获取分类数据
        }
    
    }
</script>

<style lang="scss" scoped>
.sort{
    .search{
     width: 100%;
     height: 50px;
     padding: 10px 15px;
     box-sizing: border-box;
     background-color: #f3f4f5;
}
 .sear{
     display: block;
     width: 100%;
     height: 100%;
    border: 1px solid #00000024;
     background: #f3f4f4;
     box-sizing: border-box;
     border-radius: 2px;
     display: flex;
}
 .sear>.left{
     flex: 1;
}
 .sear>.right{
     width:36px;
     height: 28px;
     text-align: center;
     line-height: 28px;
     color: #a9a9a9;
}
 .sear>.right>span{
     font-size: 18px;
}
 .content{
     width: 100%;
     display: flex;
}
 .content>.left{
     width: 96px;
}
 .content>.left>ul>li{
     width: 100%;
     height: 48px;
     text-align: center;
     line-height: 48px;
     background-color: #f3f4f5;
     border-left: 1px solid #fff;
}
 .content>.left>ul>li.con{
     background-color: #ffffff;
     font-weight: bold;
     border-left: 2px solid #f03867;
}
 .content>.left>ul>li>span{
     margin: 0 auto;
     position: relative;
     display: block;
     width: 53px;
     height: 48px;
     border-bottom: 1.5px solid #edeeee;
     box-sizing: border-box;
     font-size: 13px;
}
 .content>.right{
     flex: 1;
     background-color: #ffffff;
}
 .content>.right>ul>li.active{
    display: block;
 }
 .content>.right>ul>li{
    display: none;
 }
 .content>.right>ul>li>.toptitle{
     height: 48px;
     padding: 20px 0 0;
     margin: 0 26px;
     box-sizing: border-box;
}
 .content>.right>ul>li>.toptitle>h2{
     font-size: 13px;
     font-weight: bold;
}
 .content>.right>ul>li>.content_box{
     display: flex;
     justify-content: space-between;
     padding: 10px 25px 0px 23px;
     box-sizing: border-box;
}
 .content>.right>ul>li>.item_box{
     padding: 0px 25px 0 23px;
}
 .content>.right>ul>li>.item_box>div{
     width: 100%;
     height:1px;
     border-bottom: 1px solid #a9a9a9;
}
 .content>.right>ul>li>.content_box .item{
     flex: 1;
     width: 66px;
     height: 105px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     text-align: center;
}
 .content>.right>ul>li>.content_box .item>.first{
     width: 62px;
     height: 62px;
}
 .content>.right>ul>li>.content_box .item>.last{
     font-size: 12px;
     width: 62px;
     height: 7px;
     padding: 11px 0 25px 0;
     color: #222;
}
}

</style>